<template>
    <div class="platform-dict" style="height: 100%">
        <el-form :inline="true" :model="searchForm" size="mini">
            <el-form-item label="名称">
                <el-input v-model="searchForm.name" placeholder="名称"></el-input>
            </el-form-item>
            <el-form-item label="编码">
                <el-input v-model="searchForm.code" placeholder="编码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button type="primary" @click="handleReset">重置</el-button>
                <el-button type="primary" @click="handleRefresh">刷新</el-button>
                <el-button type="primary" @click="handleCreate">新建</el-button>
            </el-form-item>
        </el-form>
        <el-tabs value="first">
            <el-tab-pane label="系统字典" name="first">
                <el-table
                        border
                        stripe
                        :default-expand-all="true"
                        row-key="ukId"
                        :data="tableData"
                        style="width: 100%"
                        size="mini"
                        :tree-props="{children: 'dictItems', hasChildren: 'hasChildren'}">
                    <el-table-column
                            prop="name"
                            label="名称"
                            width="*"
                            min-width="150">
                    </el-table-column>
                    <el-table-column
                            prop="code"
                            label="编码"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="value"
                            label="值"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="状态"
                            width="60">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.status == '1'" type="success" size="mini">启用</el-tag>
                            <el-tag v-if="scope.row.status == '0'" type="danger" size="mini">停用</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="sort"
                            label="排序"
                            width="70">
                    </el-table-column>
                    <el-table-column
                            :formatter="dateFormatter"
                            prop="gmtCreate"
                            label="创建时间"
                            width="140">
                    </el-table-column>
                    <el-table-column
                            :formatter="dateFormatter"
                            prop="gmtModified"
                            label="修改时间"
                            width="140">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            width="252">
                        <template slot-scope="scope">
                            <div v-if="scope.row.dictId == null">
                                <el-button
                                        size="mini"
                                        @click="handleDictItemCreate(scope.$index, scope.row)">新建字典项
                                </el-button>
                                <el-button
                                        size="mini"
                                        @click="handleEdit(scope.$index, scope.row)">编辑
                                </el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.$index, scope.row)">删除
                                </el-button>
                            </div>
                            <div v-if="scope.row.dictId != null">
                                <el-button
                                        :disabled="true"
                                        size="mini"
                                        @click="handleDictItemCreate(scope.$index, scope.row)">新建字典项
                                </el-button>
                                <el-button
                                        size="mini"
                                        @click="handleDictItemEdit(scope.$index, scope.row)">编辑
                                </el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDictItemDelete(scope.$index, scope.row)">删除
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="业务字典" name="second">
                <el-table
                        border
                        stripe
                        :default-expand-all="true"
                        row-key="ukId"
                        :data="tableData"
                        style="width: 100%"
                        size="mini"
                        :tree-props="{children: 'dictItems', hasChildren: 'hasChildren'}">
                    <el-table-column
                            prop="name"
                            label="名称"
                            width="*"
                            min-width="150">
                    </el-table-column>
                    <el-table-column
                            prop="code"
                            label="编码"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="value"
                            label="值"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="状态"
                            width="60">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.status == '1'" type="success" size="mini">启用</el-tag>
                            <el-tag v-if="scope.row.status == '0'" type="danger" size="mini">停用</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="sort"
                            label="排序"
                            width="70">
                    </el-table-column>
                    <el-table-column
                            :formatter="dateFormatter"
                            prop="gmtCreate"
                            label="创建时间"
                            width="140">
                    </el-table-column>
                    <el-table-column
                            :formatter="dateFormatter"
                            prop="gmtModified"
                            label="修改时间"
                            width="140">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            width="252">
                        <template slot-scope="scope">
                            <div v-if="scope.row.dictId == null">
                                <el-button
                                        size="mini"
                                        @click="handleDictItemCreate(scope.$index, scope.row)">新建字典项
                                </el-button>
                                <el-button
                                        size="mini"
                                        @click="handleEdit(scope.$index, scope.row)">编辑
                                </el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.$index, scope.row)">删除
                                </el-button>
                            </div>
                            <div v-if="scope.row.dictId != null">
                                <el-button
                                        :disabled="true"
                                        size="mini"
                                        @click="handleDictItemCreate(scope.$index, scope.row)">新建字典项
                                </el-button>
                                <el-button
                                        size="mini"
                                        @click="handleDictItemEdit(scope.$index, scope.row)">编辑
                                </el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDictItemDelete(scope.$index, scope.row)">删除
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <dormitory-pagination :parent-method="listDict" :pagination="pagination"></dormitory-pagination>
        <el-dialog
                :close-on-click-modal="false"
                title="字典管理"
                :visible.sync="dialogFormVisible"
                label-width="80px">
            <el-form ref="form" :model="dictForm" label-width="80px">
                <el-form-item label="字典编码">
                    <el-input v-model="dictForm.code"></el-input>
                </el-form-item>
                <el-form-item label="字典名称">
                    <el-input v-model="dictForm.name"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="dictForm.status" placeholder="请选择状态">
                        <el-option label="启用" :value="1"></el-option>
                        <el-option label="停用" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input v-model="dictForm.sort" type="number" min="0" max="90000"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSave">保存</el-button>
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog
                :close-on-click-modal="false"
                title="字典项管理"
                :visible.sync="dictItemFormVisible"
                label-width="100px">
            <el-form ref="form" :model="dictItemForm" label-width="100px">
                <el-form-item label="字典项编码">
                    <el-input v-model="dictItemForm.code"></el-input>
                </el-form-item>
                <el-form-item label="字典项名称">
                    <el-input v-model="dictItemForm.name"></el-input>
                </el-form-item>
                <el-form-item label="字典项值">
                    <el-input v-model="dictItemForm.value"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="dictItemForm.status" placeholder="请选择状态">
                        <el-option label="启用" :value="1"></el-option>
                        <el-option label="停用" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input v-model="dictItemForm.sort" type="number" min="0" max="90000"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleDictItemSave">保存</el-button>
                    <el-button @click="dictItemFormVisible = false">取 消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import {listDict, saveDict, createDict, updateDict, deleteDict} from "../../../../api/platform/dict";
    import { listDictItem, saveDictItem, createDictItem, updateDictItem, deleteDictItem} from "../../../../api/platform/dictItem";

    import DormitoryPagination from "../../components/DormitoryPagination";

    export default {
        name: "Dict",
        components: {DormitoryPagination},
        data() {
            return {
                tableData: [],
                dialogFormVisible: false,
                dictForm: {
                    ukId: "",
                    code: "",
                    name: "",
                    status: 1,
                    sort: 10000
                },
                dictItemFormVisible: false,
                dictItemForm: {
                    ukId: "",
                    dictId: "",
                    code: "",
                    name: "",
                    value: "",
                    status: 1,
                    sort: 10000
                },
                searchForm: {
                    code: "",
                    name: ""
                },
                pagination: {
                    total: 0,
                    current: 1,
                    size: 10
                },
                isUpdate: false
            }
        },
        methods: {
            listDict(current, size) {
                listDict(this.searchForm, current, size).then(response => {
                    this.tableData = response.data.dicts.records
                    this.pagination.current = response.data.dicts.current
                    this.pagination.size = response.data.dicts.size
                    this.pagination.total = response.data.dicts.total
                }).catch(error => {
                    console.log(error)
                })
            },
            handleCreate() {
                this.isUpdate = false
                this.dictForm = {}
                this.dialogFormVisible = true
            },
            handleEdit(index, row) {
                this.isUpdate = true
                this.dictForm = row
                this.dialogFormVisible = true
            },
            handleReset() {
                this.searchForm = {}
            },
            handleRefresh() {
                this.listDict(this.pagination.current, this.pagination.size)
            },
            handleSearch() {
                this.listDict(this.pagination.current, this.pagination.size)
            },
            handleSave() {
                if (this.isUpdate) {
                    updateDict(this.dictForm).then(response => {
                        this.dialogFormVisible = false
                        this.listDict()
                    }).catch(error => {
                        console.log(error)
                    })
                } else {
                    createDict(this.dictForm).then(response => {
                        this.dialogFormVisible = false
                        this.listDict()
                    }).catch(error => {
                        console.log(error)
                    })
                }
            },
            handleDelete(index, row) {
                deleteDict(row.ukId).then(response => {
                    this.dialogFormVisible = false
                    this.listDict()
                }).catch(error => {
                    console.log(error)
                })
            },
            handleDictItemCreate(index, row) {
                this.isUpdate = false
                this.dictItemForm = {}
                this.dictItemForm.dictId = row.ukId
                this.dictItemFormVisible = true
            },
            handleDictItemEdit(index, row) {
                this.isUpdate = false
                this.dictItemForm = row
                this.dictItemFormVisible = true
            },
            handleDictItemSave() {
                if (this.isUpdate) {
                    updateDictItem(this.dictItemForm).then(response => {
                        this.dictItemFormVisible = false
                        this.listDict()
                    }).catch(error => {
                        console.log(error)
                    })
                } else {
                    createDictItem(this.dictItemForm).then(response => {
                        this.dictItemFormVisible = false
                        this.listDict()
                    }).catch(error => {
                        console.log(error)
                    })
                }
            },
            handleDictItemDelete(index, row) {
                console.log(row.ukId)
                deleteDictItem(row.ukId)
                this.listDict()
            },
            dateFormatter(row, column, cellValue, index, type) {
                let replace = cellValue.replace("T", " ");
                return replace.substring(0, 19);
            }
        },
        created() {
            this.listDict()
        }
    }
</script>

<style scoped>
    .platform-dict-list {
        width: 160px;
        height: 100%;
        float: left;
    }

    .platform-dict-val-list {
        width: calc(100% - 160px);
        height: 100%;
        float: left;
    }

    /*样式重写*/
    .el-menu {
        border: none;
        user-select: none;
    }

    .el-menu-item {
        height: 40px;
        color: #333333;
    }

    .el-menu-item, .el-submenu__title {
        line-height: 40px;
    }
</style>